<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex == index }"
			 @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<!-- 内容 -->
		<view class="content" v-show="tabCurrentIndex == 0">
			<view class="img">
				<image src="../static/kehuishou.png"></image>
			</view>
			<view class="common">常见可回收物</view>
			<view class="all">
				<view class="icon">玻璃杯具</view>
				<view class="icon">玻璃餐具</view>
				<view class="icon">玻璃门窗</view>
				<view class="icon">易拉罐</view>
				<view class="icon">金属器皿</view>
				<view class="icon">金属刀具</view>
				<view class="icon">金属架子</view>
				<view class="icon">水龙头</view>
				<view class="icon">金属架</view>
				<view class="icon">金属制品</view>
				<view class="icon">保温杯壶</view>
				<view class="icon">塑料制品</view>
				<view class="icon">塑料瓶</view>
				<view class="icon">塑料玩具</view>
				<view class="icon">油桶</view>
				<view class="icon">塑料盒</view>
				<view class="icon">塑料碗盆</view>
				<view class="icon">食品罐桶</view>
				<view class="icon">奶瓶奶嘴</view>
				<view class="icon">纸箱报纸</view>
				<view class="icon">书本传单</view>
				<view class="icon">旧铁锅</view>
				<view class="icon">旧衣物</view>
				<view class="icon">旧箱包</view>
			</view>
			<view class="common require">可回收垃圾投放要求</view>
			<view class="demand">
				<view>1.轻投轻放</view>
				<view>2.清洁干燥、避免污染、废纸尽可能平整</view>
				<view>3.立体包装请清空内容物，清洁后压扁投放</view>
				<view>4.有尖锐边角，应包裹后 投放</view>
			</view>
		</view>
		<!-- 内容二 -->
		<view class="content" v-show="tabCurrentIndex == 1">
			<view class="img">
				<image src="../static/yifu.png"></image>
			</view>
			<view class="common">常见易腐垃圾</view>
			<view class="all">
				<view class="icon">剩菜剩饭</view>
				<view class="icon">家养绿植</view>
				<view class="icon">中药材渣</view>
				<view class="icon">蔬菜瓜果</view>
				<view class="icon">豆类菌类</view>
				<view class="icon">五谷杂粮</view>
				<view class="icon">豆制品</view>
				<view class="icon">肉干肉铺</view>
				<view class="icon">动物内脏</view>
				<view class="icon">动物骨头</view>
				<view class="icon">海鲜产品</view>
				<view class="icon">鱼虾蟹</view>
				<view class="icon">坚果食品</view>
				<view class="icon">糕点甜品</view>
				<view class="icon">饼干蜜饯</view>
				<view class="icon">调味用品</view>
				<view class="icon">茶叶茶包</view>
				<view class="icon">咖啡残渣</view>
				<view class="icon">宠物饲料</view>
				<view class="icon">果皮果壳</view>
				<view class="icon">菜叶蛋壳</view>
				<view class="icon">乳制品</view>
			</view>
			<view class="common require">易腐垃圾投放要求</view>
			<view class="demand">
				<view>1.易腐垃圾应当提供给专业化处理单位进行处理</view>
				<view>2.严禁将废弃食用油脂（包括地沟油）加工后作为食用油使用</view>
				<view>3.纯流质食物垃圾、如酸奶牛奶等，可直接倒进下水管</view>
				<view>4.有包装的易腐垃圾应将包装去除后分类投放</view>
			</view>
		</view>
		<!-- 内容三 -->
		<view class="content" v-show="tabCurrentIndex == 2">
			<view class="img">
				<image src="../static/youhai.png"></image>
			</view>
			<view class="common">常见有害垃圾</view>
			<view class="all">
				<view class="icon">废旧电池</view>
				<view class="icon">废旧灯管</view>
				<view class="icon">水银温度计</view>
				<view class="icon">过期药品</view>
				<view class="icon">充电电池</view>
				<view class="icon">镉镍电池</view>
				<view class="icon">铅酸电池</view>
				<view class="icon">蓄电池</view>
				<view class="icon">纽扣电池</view>
				<view class="icon">荧光灯管</view>
				<view class="icon">卤素灯</view>
				<view class="icon">药物胶囊</view>
				<view class="icon">药品内包装</view>
				<view class="icon">医用纱布</view>
				<view class="icon">医用棉签</view>
				<view class="icon">废油漆桶</view>
				<view class="icon">染发剂壳</view>
				<view class="icon">废矿物油</view>
				<view class="icon">废指甲油</view>
				<view class="icon">废洗甲水</view>
				<view class="icon">杀虫剂罐</view>
				<view class="icon">老鼠药</view>
				<view class="icon">光感胶片</view>
				<view class="icon">相片底片</view>
			</view>
			<view class="common require">有害垃圾投放要求</view>
			<view class="demand">
				<view>1.投放时请注意轻放</view>
				<view>2.易破损的请连带包装或包裹后轻放到指定地点</view>
				<view>3.易挥发的请密封后投放</view>
				<view>4.杀虫剂等压力罐装容器，应排空内容物后投放</view>
			</view>
		</view>
		<!-- 内容四 -->
		<view class="content" v-show="tabCurrentIndex == 3">
			<view class="img">
				<image src="../static/qita.png"></image>
			</view>
			<view class="common">常见其他垃圾</view>
			<view class="all">
				<view class="icon">砖瓦陶瓷</view>
				<view class="icon">废纸巾</view>
				<view class="icon">瓷器碎片</view>
				<view class="icon">建筑垃圾</view>
				<view class="icon">口香糖</view>
				<view class="icon">椰子壳</view>
				<view class="icon">坚果外壳</view>
				<view class="icon">榴莲壳</view>
				<view class="icon">保鲜膜</view>
				<view class="icon">保鲜袋</view>
				<view class="icon">厨房用纸</view>
				<view class="icon">隐形眼镜</view>
				<view class="icon">烟灰烟头</view>
				<view class="icon">干燥剂</view>
				<view class="icon">卫生巾</view>
				<view class="icon">避孕套</view>
				<view class="icon">保暖贴</view>
				<view class="icon">纸尿裤</view>
				<view class="icon">隔热垫</view>
				<view class="icon">隔尿垫</view>
				<view class="icon">猫砂</view>
				<view class="icon">试纸</view>
				<view class="icon">口罩</view>
				<view class="icon">胶水</view>
			</view>
			<view class="common require">其他垃圾投放要求</view>
			<view class="demand">
				<view>1.采取卫生填埋可有效减少对地下水、地表水、土壤及空气的污染</view>
				<view>2.难以辨识类别的生活垃圾可投放与其他垃圾容器内</view>
				<view>3.部分垃圾可以使用生物分解的方法解决，如放蚯蚓</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {

		},
		data() {
			return {
				tabCurrentIndex: '',
				navList: [{
						text: '可回收垃圾',
						orderList: []
					},
					{
						text: '易腐垃圾',
						orderList: []
					},
					{
						text: '有害垃圾',
						orderList: []
					},
					{
						text: '其他垃圾',
						orderList: []
					}
				]
			};
		},
		onLoad(options) {
			// 页面显示是默认选中第一个
			// this.tabCurrentIndex = 0;
			this.tabCurrentIndex = options.id
			console.log(options)
		},
		methods: {
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 跳转商品详情页
			navigate() {
				this.$emit('itemClick')
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		background: #F5F5F5;
		// height: 100%;
	}
	.navbar {
		display: flex;
		width: 750rpx;
		height: 85rpx;
		padding: 0 5px;
		background: #fff;
		border-radius: 10px 10px 0px 0px;
		position: absolute;
		top: 0;
		z-index: 10;
		border-bottom: 2rpx solid #eee;
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 26rpx;
			color: #333;
			font-family:Noto Sans S Chinese;
			position: relative;
			&.current {
				color: #42ADFF;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 110rpx;
					height: 0;
					border-bottom: 4rpx solid #42ADFF;
				}
			}
		}
	}
	.container {
		.content {
			width: 710rpx;
			height: 1066rpx;
			background-color: #fff;
			margin-left: 20rpx;
			margin-top: 100rpx;
			overflow: hidden;
			.img {
				width: 710rpx;
				height: 252rpx;
				margin-bottom: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.common {
				width: 710rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding-left: 10rpx;
				border-left: 8rpx solid #FEC75E;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 27rpx;
			}
			.all {
				height: 500rpx;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 25rpx;
				.icon {
					width: 124rpx;
					height: 36rpx;
					font-size: 24rpx;
					color: #808080;
					border:1px solid #808080;
					border-radius:18px;
					margin: 4rpx 26rpx 16rpx 26rpx;
					text-align: center;
				}
			}
			.require {
				margin-bottom: 18rpx;
			}
			.demand {
				margin-left: 17rpx;
				color: #808080;
				font-size: 24rpx;
				line-height: 36rpx;
			}
		}
	}
</style>